<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加员工</title>
</head>
<body>
	
	<jsp:include page="../header.jsp"></jsp:include>
	<form action="staff.do?action=add" method="post" enctype="multipart/form-data">
		<h1>添加员工信息</h1>
		姓名：<input type="text" name="name" placeholder="请输入员工姓名"><br>
		性别：<input type="radio" name="sex" value="男" checked>男
			  <input type="radio" name="sex" value="女">女<br>
		身份证号：<input type="text" name="idcard" placeholder="请输入身份证号"><br>
		生日：<input type="date" name="birthday"><br>
		部门：<select name="deptId"> </select><br>
		职位：<input type="text" name="job" placeholder="请输入员工职位"><br>
		领导：<select name="leaderId"></select><br>
		电话：<input type="text" name="phone" placeholder="请输入员工电话"><br>
		邮箱：<input type="email" name="email" placeholder="请输入员工邮箱"><br>
		工资：<input type="number" name="salary" placeholder="请输入员工工资" value="0" step="0.01"><br> 
		照片：<input type="file" name="photo"><br>
		<input type="submit" value="添加"><br>
	</form>
	
	<div style="color: red">
		${error }
	</div>
	
	
	<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
	
	<script type="text/javascript">
		$.ajax({
			url: 'dept.do?action=getAll',
			//data: {}, 
			type: 'get',
			dataType: 'json', // 返回数据的格式
			success: function(result) { // 此处的result就是返回的数据 json->js对象 这里的result就是js对象 这里jquery会自动将json串转成js对象
				
				var html = '<option value="">请选择部门</option>';
				
				// 请求成功
				// 遍历result数组
				$.each(result, function(index, item) {
					html += '<option value="'+item.id+'">' + item.name + '</option>';
				});
				$("select[name='deptId']").html(html);
			}, 
			error: function() {
				alert('请求失败');
			}
			
		});
		
		$("select[name='deptId']").change(function() {
			// 获取当前选中的部门的值
			var deptId = $(this).val();

			// 判断deptId非空
			// 注意：js中 if里可以不为true
			if (deptId) {
				// 选择了某一个部门
				$.ajax({
					url: 'staff.do?action=getByDeptId',
					data: {deptId: deptId},    // data的值是一个对象
					type: 'get',
					dataType: 'json',
					success: function(result) {
						var html = ''
						$.each(result, function(index, item) {
							html += '<option value="' + item.id + '">' + item.name + '</option>';
						});
						$("select[name='leaderId']").html(html);
					} , 
					error: function() {
						alert("请求失败");			
					}
				});
			} else {
				// 没有选择部门
				// 清空领导的下拉列表
				$("select[name='leaderID']").html('');
			}
		});
	
	</script>
	
</body>
</html>